import { useState, Fragment } from 'react'
import { useRecoilState } from 'recoil';
import { userState } from '../../store'
import {
  Card,
  Button,
  Upload,
  Spin
} from 'antd'

interface IProps {
  children?: any;
}

export default function Profile (props: IProps) {
  const [userInfo, setUserInfo] = useRecoilState(userState.userInfoAtom);
  const [isUploading, setIsUploading] = useState(false)

  return (
    <Fragment>
      <Card
        title="个人资料" 
        bordered={false}
        extra={<Button >取消</Button>} 
      >
        <Upload
          name="avatar"
          listType="picture-card"
          className="avatar-uploader" 
          showUploadList={false}
          // customRequest={handleUploadAvatar}
        >
          <Spin
            spinning={isUploading}
          >
            {
              userInfo.avatar ? <img style={{height: '100px'}} src={userInfo.avatar} alt="头像"/> : <span>点击上传</span>
            }
          </Spin>
        </Upload>
        <span> 你好：{userInfo.displayName} </span>
      </Card>
    </Fragment>
  )
}
